import Vue from '@/main.js'
import echarts from 'echarts'

function RenderBar(option) {
  this._init(option)
}
RenderBar.prototype = {
  _init: function(option) {
    this.xAxis = {
      type: 'category',
      axisLabel: {
        color: '#A6DFFE',
        show: true,
        rotate: 90
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true
      }
    }
    this.yAxis = {
      type: 'value',
      axisLabel: {
        show: true,
        color: '#A6DFFE'
      },
      axisTick: {
        show: true
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    }
    this.tooltip = {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    }
    this.grid = { top: '55%' }
    this.series = this.set_series(option)
  },
  set_series: function(option) {
    return [
      {
        type: 'bar',
        name: '每日工作时长统计',
        data: this.handleBarData(option.data),
        roundCap: true,
        barWidth: '10px',
        showBackground: true,
        backgroundStyle: {
          color: '#05244e'
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
              offset: 0,
              color: 'rgb(57,89,255,1)'
            }, {
              offset: 1,
              color: 'rgb(46,200,207,1)'
            }])
          }
        },
        label: {
          show: true,
          textStyle: {
            color: 'white',
            fontSize: '8',
            right: 0
          },
          position: 'top',
          formatter: function(obj) {
            return obj.value[1] + 'min'
          }
        }
      },
      {
        name: '每日工作时长统计',
        type: 'line',
        smooth: true,
        data: this.handleBarData(option.data),
        showAllSymbol: true,
        symbolSize: 0,
        itemStyle: {
          color: 'rgb(46,200,207,1)',
          borderWidth: 1
        }
      },
      {
        name: '每周工作时长统计',
        type: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        data: this.handlePieData(option.data),
        label: {
          color: 'white',
          formatter(obj) {
            return `${obj.name}
            总时长${obj.value}min
            占比${obj.percent.toFixed(2)}`
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
              offset: 0,
              color: 'rgb(57,89,255,1)'
            }, {
              offset: 1,
              color: 'rgb(46,200,207,1)'
            }])
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  },
  handleBarData(data) {
    return data.reduce((prev, cur, index) => {
      const values = cur.data.map(i => {
        return {
          value: [i.date, i.value]
        }
      })
      return prev.concat(values)
    }, [])
  },
  handlePieData(data) {
    return data.map(i => {
      const totalTime = i.data.reduce((prev, cur) => {
        return prev + cur.value
      }, 0)
      return {
        name: i.dateRange[0] + '--' + i.dateRange[1].slice(5),
        value: totalTime
      }
    })
  }
}
export default RenderBar
